<template>
  <div class="monitor-tree" :style="'height:'+containerHeight+'px'">
      <el-tree
        :style="'height:100%'"
        ref="buildTree"
        highlight-current
        node-key="id"
        :data="treeDataList"
        :expand-on-click-node="false"
        :props="menuListTreeProps"
        @node-click="selectBuild"
        default-expand-all
      >
        <span class="custom-tree-node"  slot-scope="{ node, data }">
          <span :dataType="data.type">
              <i class="el-icon-setting" style="padding: 6px;margin-left:-24px;" v-if="data.type=='b'&&node.isLeaf"></i>
              <i class="el-icon-star-off" style="padding: 6px; margin-left:-24px;" v-if="data.type=='d'"></i>
               <span style="margin-left:0px;"> {{ node.label }}</span>
          </span>
        </span>
      </el-tree>
  </div>
</template>

<script>
  import  commondef from '@/utils/common'
  import * as Util from "@/utils";
  export default {
    data () {
      return {
        i: 0,
        menuListTreeProps: {
          label: "name",
          children: "children"
        },
        treeDataList:[],
        firstDevice:[],
      }
    },
    computed:{
      containerHeight() {
        return Util.getClientHeight() - 123;
      }
    },
    methods: {
      selectBuild(data){
        if(data.type=='d'){
          this.$emit("nodeChange",data.id);
        }
      },
      getFirstDevice(arr,type) {
        for (var i = 0; i < arr.length; i++) {
          var item = arr[i]
          if (item.children&&item.children.length>0) {
              this.getFirstDevice(item.children, type)
          }else {
            if (item.type === type) {
              this.firstDevice.push(item);
            }
          }
        }
      },
      getBuildDeviceList(){
        this.$api.okhttp({
          url: this.$http.adornUrl("/ecs/ecsbuildinginfo/getDeviceTree"),
          method: "get",
          params: this.$http.adornParams({
            "meterType":'010000',
            'projectId': this.$util.cookies.get("cuuren_projectId"),
            "customerId":this.$util.cookies.get('customer_id'),
            "subitemType": '0' //只查馈线表
          })
        }).then(res=>{
          if (res && res.code == 0) {
            this.treeDataList = Util.treeDataTranslate(res.data,"id","pid");
         //   console.log(JSON.stringify(this.treeDataList));
            this.getFirstDevice(this.treeDataList,'d');
            if(res.data.length>0){
               this.$nextTick(()=>{
                 this.$refs.buildTree.setCurrentKey(this.firstDevice[0].id);
                 this.$emit("nodeChange",this.firstDevice[0].id);
               })
            }
          }
        })
      },
    },
    mounted () {
      this.getBuildDeviceList();
    }
  }
</script>

<style scoped lang="scss">
  @import "../../../assets/scss/_variables";

.monitor-tree {
  padding: 10px 5px;
  margin-left: 10px;
  min-width: 200px;
  /*<!--background: $font-white;-->*/
  text-align: left;
  font-size: 14px;
  overflow-y: auto;
  background: rgba(0, 0, 0, .1);
}
.monitor-tree .el-tree{
  border:  0;
}
.el-tree{
  width: 100%;
  overflow-x: auto;
}
</style>
<style>
.el-tree > .el-tree-node{
  min-width:100%;
  display: inline-block !important;
}
</style>
